﻿@page "/Desktop"
@inject IJSRuntime JS

<PageTitle>iDesktop - 西建大 iOS Club</PageTitle>

<ul id="nav">
    <li>
        <img src="iOS_Club_LOGO.png" alt="" style="height: 42px;padding: 7px 14px;"/>
    </li>
    <li>
        <a>iOS Club</a>
    </li>
    @foreach (var link in Model.Links)
    {
        <li>
            <a>@link</a>
        </li>
    }
</ul>


<div>
    <div id="draggable" class="data">
        <header class="header" Id="header">
            <header>
                <i class="light" style="background-color: #fd6458;"></i>
                <i class="light" style="background-color: #ffbf2b; margin-left: 8px;"></i>
                <i class="light" style="background-color: #24cc3d; margin-left: 8px;"></i>
            </header>
            <h4>@Model.Title</h4>
            <div style="width: 46px"></div>
        </header>
        <main class="context">
            @switch (Model.ContentType)
            {
                case "text":
                    <ErrorView/>
                    break;
                case "test":
                    <ErrorView/>
                    break;
                default:
                    <p>@Model.ContentType</p>
                    break;
            }
        </main>
    </div>
</div>


<div class="dock">
    <div class="dock-container">
        @foreach (var model in Models)
        {
            <div class="dock-item" title="@model.Title" @onclick="() => OnClick(model)">
                <img alt="" src="@model.Image"/>
            </div>
        }
    </div>
</div>

@code
{
    private bool IsDisplay { get; set; } = true;

    private void OnClick(DesktopModel model)
    {
        Model = model;
        IsDisplay = !IsDisplay;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initializeDrag");
        }
    }
}

@code{

    class DesktopModel
    {
        public string Title { get; init; } = "";
        public string ContentType { get; init; } = "";
        public string Image { get; init; } = "";
        public string[] Links { get; init; } = [];
    }

    private DesktopModel Model { get; set; } = new();

    private DesktopModel[] Models { get; } =
    [
        new() { Title = "测试软件1", ContentType = "这是个测试", Image = "Centre/男生.png", Links = ["https://www.baidu.com", "https://www.bing.com"]},
        new() { Title = "测试软件2", ContentType = "text", Image = "Centre/女生.png" }
    ];

}

<style>
    body {
        margin: 0;
        padding: 0;
        background-image: linear-gradient(to bottom right, #ff6b6b, #7171ae, #10bce7);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
    }

    .data {
        display: @(string.IsNullOrEmpty(Model.Title) && IsDisplay ? "none" : "block");
        min-height: 200px;
        min-width: 250px;
        height: 450px;
        width: 750px;
        border-radius: 10px;
        background-color: #fff;
        resize: both;
        position: absolute;
        left: 240px;
        top: 140px;
        overflow: hidden;
    }

    #nav {
        margin: 0 auto;
        padding: 0;
        list-style: none;
        width: 100%;
        background-color: #f3f5f7;
        top: 0;
        position: fixed;
        z-index: 3;
    }

    #nav li {
        float: left;
    }

    #nav a {
        display: block;
        padding: 10px 20px;
        color: #333;
        text-decoration: none;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    #nav a:hover {
        background: #ddd;
        color: #000;
    }

    .dock {
        position: absolute;
        bottom: 10px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .dock-container {
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        /*box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);*/

        padding: 10px;
        margin-bottom: 2px;
        border-radius: 16px;

        display: flex;
        align-items: flex-end;
    }

    .dock-item {
        margin: 0 10px;
        text-align: center;
        transition: transform 0.3s;
    }

    .dock-item:hover {
        transform: scale(1.3);
    }

    .dock-item img {
        height: 42px;
    }

    .light {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    header {
        overflow: hidden;
        display: flex;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
    }

    .context {
        margin: 20px;
        height: 100%;
        overflow: auto;
    }

    .data ::-webkit-scrollbar {
        display: block;
    }

    @@media screen and (max-width: 768px) {
        .data {
            border-radius: 0;
        }
    }
</style>